html提示弹窗（纯js，无需引入其他库） |
您所在的位置：网站首页 › html 弹出提示框 › html提示弹窗（纯js，无需引入其他库） |
html提示弹窗（纯js，无需引入其他库）
|
网页开发很多时候都需要一些提示框，来显示某个动作的执行状态。 自带的window.alert还需要点确定按钮，很多时候我们只需要停留几秒的小弹窗，不需要用户点击或输入。 用js写一个函数，实现该功能。 //type:success, error, info //time:ms function displayAlert(type, data, time){ var lunbo=document.createElement("div"); if(type == "success") { lunbo.style.backgroundColor = "#009900"; } else if(type == "error") { lunbo.style.backgroundColor = "#990000"; } else if(type == "info") { lunbo.style.backgroundColor = "#e6b800"; } else { console.log("入参type错误"); return; } lunbo.id="lunbo"; lunbo.style.position = "absolute"; lunbo.style.width = "200px"; lunbo.style.height = "60px"; lunbo.style.marginLeft = "-100px"; lunbo.style.marginTop = "-30px"; lunbo.style.left = "90%"; lunbo.style.top = "15%"; lunbo.style.color = "white"; lunbo.style.fontSize = "25px"; lunbo.style.borderRadius = "20px"; lunbo.style.textAlign="center"; lunbo.style.lineHeight="60px"; if(document.getElementById("lunbo")==null){ document.body.appendChild(lunbo); lunbo.innerHTML=data; setTimeout(function(){ document.body.removeChild(lunbo); } ,time); } }以下代码是参考其他大佬的，然后做了一些修改。 调用时的入参包含三部分： 1、type success ：显示绿色弹窗 error: 显示红色弹窗 info:显示黄色弹窗 这几个颜色是我自己用取色器找的觉得比较好看的颜色， if(type == "success") { lunbo.style.backgroundColor = "#009900"; } else if(type == "error") { lunbo.style.backgroundColor = "#990000"; } else if(type == "info") { lunbo.style.backgroundColor = "#e6b800"; } else { console.log("入参type错误"); return; }你也可以按照自己的喜好在此处去修改颜色的rgb值 2、弹窗内容 内容就根据需要传入就行。 弹窗的格式如下： lunbo.style.position = "absolute"; lunbo.style.width = "200px"; lunbo.style.height = "60px"; lunbo.style.marginLeft = "-100px"; lunbo.style.marginTop = "-30px"; lunbo.style.left = "90%"; lunbo.style.top = "15%"; lunbo.style.color = "white"; lunbo.style.fontSize = "25px"; lunbo.style.borderRadius = "20px"; lunbo.style.textAlign="center"; lunbo.style.lineHeight="60px";你也可以根据需要自己更改弹窗出现的位置，弹窗的边缘角度，以及文字的大小和颜色。 3、弹窗持续时间 单位为毫秒，传入整数即可。 简单再写一个html测试程序： function displayAlert(type, data, time){ var lunbo=document.createElement("div"); if(type == "success") { lunbo.style.backgroundColor = "#009900"; } else if(type == "error") { lunbo.style.backgroundColor = "#990000"; } else if(type == "info") { lunbo.style.backgroundColor = " #e6b800"; } else { console.log("入参type错误"); return; } lunbo.id="lunbo"; lunbo.style.position = "absolute"; lunbo.style.width = "200px"; lunbo.style.height = "60px"; lunbo.style.marginLeft = "-100px"; lunbo.style.marginTop = "-30px"; lunbo.style.left = "90%"; lunbo.style.top = "15%"; lunbo.style.color = "white"; lunbo.style.fontSize = "25px"; lunbo.style.borderRadius = "20px"; lunbo.style.textAlign="center"; lunbo.style.lineHeight="60px"; if(document.getElementById("lunbo")==null){ document.body.appendChild(lunbo); lunbo.innerHTML=data; setTimeout(function(){ document.body.removeChild(lunbo); } ,time); } } function test0() { displayAlert("success", "success TEST", 1500); } function test1() { displayAlert("error", "error TEST", 1500); } function test2() { displayAlert("info", "info TEST", 1500); } 成功弹窗 失败弹窗 消息弹窗该程序可直接在https://www.w3school.com.cn/tiy/t.asp?f=eg_html_td_colspan这个网址复制粘贴然后运行。 实现效果为 |
如果工程较大可以直接将该函数单独写在js文件中，在html中引用即可。在其他js中引用有时会提示找不到文件，可以将两个js文件都放在html的body之后，例如： 我在这个html中引用了infoCfg.js,，而这个js文件需要调用弹窗显示，就在html的该位置处引用这两个js即可。 
OK，完毕。【本文地址】
今日新闻 |
推荐新闻 |